<template>
<div>
    <el-pagination
    layout=" sizes ,prev, pager, next"
     @current-change='one'
     @size-change='yemian'
    :total="50"
    :page-sizes="[2,5,10]"

    >
  </el-pagination>
    <el-table
    :data="tableData"

    style="width: 100%">


    <el-table-column
      label="id"
      width="180"

      >
      <template slot-scope="scope">

        <span style="margin-left: 10px">{{ scope.row.id }}</span>
      </template>
    </el-table-column>


     <el-table-column
      label="缩略图"
      width="200">
      <template slot-scope="scope">
        <img :src="$url(scope.row.cover[0].url)" alt="" class="thumbnail">
      </template>
    </el-table-column>

    <el-table-column
      label="作者"
      width="180">
      <template slot-scope="scope">
         <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.user.nickname }}</el-tag>
          </div>
      </template>
    </el-table-column>

  <el-table-column
      label="标题"
      width="200">
     <template slot-scope="scope">
         <p>
            {{ scope.row.title }}
         </p>


      </template>
    </el-table-column>

    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>

      </template>


    </el-table-column>

  </el-table>

</div>

</template>

<script>
  export default {

    data() {
      return {
        tableData: [],
        pageIndex:1,
        pageSize:10
      }
    },
    methods: {
      handleEdit(index, row) {
        this.$router.push({
			path:'/home/bianji',
			query:{
				id:row.id 
			}
		})
      },

      tiaoyong(){
         this.$axios({
        url :'/post/',
        method:'get',
        params:{
          pageIndex:this.pageIndex,
          pageSize:this.pageSize
        }
      }).then(res=>{
        const {data} =res.data
        // console.log(data);
        this.tableData= data
      })
      },
      one(val){
        this.pageIndex=val
        // console.log(val);
        this.tiaoyong()
      },
      yemian(val){
        this.pageSize=val
        this.tiaoyong();
      }
    },
    mounted(){
      // console.log(tableData);

      this.tiaoyong();
    }

  }

</script>

<style lang="less" scoped>
.thumbnail {
    width: 200px;
    height: 120px;
    object-fit: cover;
}
</style>
